<template>
<div id="out7">
    <div id="top6">购物车 <span>编辑</span></div>
    <div id="back"></div>
    <div id="tu">
    	    <img class="backI" src="../assets/img/gouwuche/_APkfRd-kaobei.png" alt=""/>
    		<img class="shop" src="../assets/img/gouwuche/tuceng-4-fuben.png" alt=""/>
    		<span class="songLi">分享送好礼</span>
    		<span class="Go">去分享 ></span>
    </div>
    <ul class="japan">
	    	<li class="li1">
	    		<img class="duiHaoD" src="../assets/img/gouwuche/duihao-kaobei-2.png"/>
	    		<span><img class="fly" src="../assets/img/duanhuowang/huiji.png"/>日本直邮</span>
	    	</li>
	    	<li class="li2">
	    		<img class="duiHao" src="../assets/img/gouwuche/duihao-kaobei-2.png"/>
	    		<div>
	    			<img src="../assets/img/shouye/2zeidianji/huihuxisihuafenmi.png"/>
	    			<div>
	    				<p class="tit">会呼吸丝滑蜜粉</p>
	    				<p>规格：蜜粉</p>
	    				<p class="price"><span>￥</span><span class="pricee">166.06</span></p>
	    			</div>
	    		</div>
	    		<span class="btns">
	    			<span class="cut">-</span>
	    			<span class="num">1</span>
	    			<span class="add">+</span>
	    		</span>
	    		<span class="shanchu">删除</span>
	    	</li>
	    	<li class="li2">
	    		<img class="duiHao" src="../assets/img/gouwuche/duihao-kaobei-2.png"/>
	    		<div>
	    			<img src="../assets/img/shouye/2zeidianji/huihuxisihuafenmi.png"/>
	    			<div>
	    				<p class="tit">会呼吸丝滑蜜粉</p>
	    				<p>规格：蜜粉</p>
	    				<p class="price"><span>￥</span><span class="pricee">166.06</span></p>
	    			</div>
	    		</div>
	    		<span class="btns">
	    			<span class="cut">-</span>
	    			<span class="num">1</span>
	    			<span class="add">+</span>
	    		</span>
	    		<span class="shanchu">删除</span>
	    	</li>
	    	<li class="li3">
	    		<span>商品金额</span>
	    		<span class="price"><span>￥</span><span class="pricee">0</span></span>
	    	</li>
	    	<li class="li3">
	    		<span>综合税总额</span>
	    		<span class="price"><span>￥</span><span class="pricee">0.33</span></span>
	    	</li>
	    	<li class="li3">
	    		<span>应付总金额</span>
	    		<span class="price"><span>￥</span><span class="pricee">0</span></span>
	    	</li>
	    	<li class="li4">
	    		<a href="#/DingDan">
	    		结算 (<span>0</span>)
	    		</a>
	    	</li>
    </ul>
    <ul class="hanguo">
	    	<li class="li1">
	    		<img class="duiHaoD" src="../assets/img/gouwuche/duihao-kaobei-2.png"/>
	    		<span><img class="fly" src="../assets/img/duanhuowang/huiji.png"/>韩国直邮</span>
	    	</li>
	    	<li class="li2">
	    		<img class="duiHao" src="../assets/img/gouwuche/duihao-kaobei-2.png"/>
	    		<div>
	    			<img src="../assets/img/shouye/2zeidianji/huihuxisihuafenmi.png"/>
	    			<div>
	    				<p class="tit">会呼吸丝滑蜜粉</p>
	    				<p>规格：蜜粉</p>
	    				<p class="price"><span>￥</span><span class="pricee">166.06</span></p>
	    			</div>
	    		</div>
	    		<span class="btns">
	    			<span class="cut">-</span>
	    			<span class="num">1</span>
	    			<span class="add">+</span>
	    		</span>
	    		<span class="shanchu">删除</span>
	    	</li>
	    	<li class="li3">
	    		<span>商品金额</span>
	    		<span class="price"><span>￥</span><span class="pricee">0</span></span>
	    	</li>
	    	<li class="li3">
	    		<span>综合税总额</span>
	    		<span class="price"><span>￥</span><span class="pricee">0.33</span></span>
	    	</li>
	    	<li class="li3">
	    		<span>应付总金额</span>
	    		<span class="price"><span>￥</span><span class="pricee">0</span></span>
	    	</li>
	    	<li class="li4">
	    		<a href="#/DingDan">
	    		结算 (<span>0</span>)
	    		</a>
	    	</li>
    </ul>
    <ul>
        <li class="li1">
	    		<img class="duiHao" src="../assets/img/shouye/6sousuojieguo/6close.png"/>
	    		<span>失效商品</span>
	    	</li>
	    	<li class="li5">
	    		<div>
	    			<img src="../assets/img/shouye/2zeidianji/huihuxisihuafenmi.png"/>
	    	    <div>
	    			<p class="tit">会呼吸丝滑蜜粉</p>
	    			<p>规格：蜜粉</p>
	    			<p>综合税：0.2%</p>
	    			<p class="price"><span>￥</span>166.06</p>
	    		</div>
	    		</div>
	    	</li>
	    	<li class="li6">
	    		<span class="clear">清除失效商品</span>
	    	</li>
    </ul>
    <ul>
    	<li class="tittt">
    		<span class="line"></span>
    		<span>猜你喜欢</span>
    		<span class="line"></span>
    	</li>
    	<li class="con">
    		<div>
    			<img src="../assets/img/shouye/1tuijian/buyituozhuangkouhong.png"/>
    			<p>不易脱妆口红</p>
    			<p class="price">￥59</p>
    		</div>
    		<span class="line"></span>
    		<div>
    			<img src="../assets/img/shouye/1tuijian/buyituozhuangkouhong.png"/>
    			<p>不易脱妆口红</p>
    			<p class="price">￥59</p>
    		</div>
    		<span class="line"></span>
    		<div>
    			<img src="../assets/img/shouye/1tuijian/buyituozhuangkouhong.png"/>
    			<p>不易脱妆口红</p>
    			<p class="price">￥59</p>
    		</div>
    		<span class="line"></span>
    		<div>
    			<img src="../assets/img/shouye/1tuijian/buyituozhuangkouhong.png"/>
    			<p>不易脱妆口红</p>
    			<p class="price">￥59</p>
    		</div>
    		<div>
    			<img src="../assets/img/shouye/1tuijian/buyituozhuangkouhong.png"/>
    			<p>不易脱妆口红</p>
    			<p class="price">￥59</p>
    		</div>
    		<span class="line"></span>
    		<div>
    			<img src="../assets/img/shouye/1tuijian/buyituozhuangkouhong.png"/>
    			<p>不易脱妆口红</p>
    			<p class="price">￥59</p>
    		</div>
    		<span class="line"></span>
    		<div>
    			<img src="../assets/img/shouye/1tuijian/buyituozhuangkouhong.png"/>
    			<p>不易脱妆口红</p>
    			<p class="price">￥59</p>
    		</div>
    		<span class="line"></span>
    		<div>
    			<img src="../assets/img/shouye/1tuijian/buyituozhuangkouhong.png"/>
    			<p>不易脱妆口红</p>
    			<p class="price">￥59</p>
    		</div>
    	</li>
    	<li class="jiaZaii">加载更多</li>
    </ul>
</div>
</template>

<script>
	export default {
		name: '',
		methods: {
			round2: function() {
				var check=false;
				var u=$("ul").length;
				var d=$(".duiHao").length;
				var m=0;
				var sl=0;
				var num;
				var fll;
				var shangchuNum;
				var shangchuNum1;
				var shanchuNum;
				$("#out7 ul").eq(u-1).css("margin-bottom","9.6rem");
				$(".tittt>.line").eq(1).css("transform","translateX(-12rem)");
                $(".duiHao").attr("check",false);
                 $(".duiHaoD").attr("check",false);
                 $(".duiHaoD").click(function(){
                 	if ($(this).attr("check")=="false") {
						$(this).css("filter","none").attr("check",true);
					} else if($(this).attr("check")=="true"){
						$(this).css("filter","grayscale(100%)").attr("check",false);
					};
                 });
                 $(".duiHaoD").eq(0).click(function(){
                 	fll=($(".duiHaoD").eq(0).attr("check")==="false"?false:true);
                 	$(".japan .duiHao").attr("check",fll);
                 	duiHaots();
                 	jiesuanR();
                 });
                 $(".duiHaoD").eq(1).click(function(){
                 	fll=($(".duiHaoD").eq(1).attr("check")==="false"?false:true);
                 	$(".hanguo .duiHao").attr("check",fll);
                 	duiHaots();
                 	jiesuanH();
                 });
				$(".duiHao").click(function(){
					if ($(this).attr("check")=="false") {
						$(this).attr("check",true);
					} else if($(this).attr("check")=="true"){
						$(this).attr("check",false);
					};
					duiHaots();
					jiesuanR();
					jiesuanH();
				});
				$(".cut").click(function(){
					if ($(this).siblings(".num").text()-0<=0) {
						return false;
					}
					num=$(this).siblings(".num").text()-1;
					$(this).siblings(".num").text(num);
					jiesuanR();
					jiesuanH();
				});
				$(".add").click(function(){
					num=$(this).siblings(".num").text()-0+1;
					$(this).siblings(".num").text(num);
					jiesuanR();
					jiesuanH();
				});
				$("ul .clear").click(function(){
					$(this).parent().parent().remove();
				});
				$("#out7>#top6>span").attr("shanchu",true);
				$("#out7>#top6>span").click(function(){
					if ($(this).attr("shanchu")=="false") {
						$("#out7 .shanchu").fadeOut(500);
						$(this).attr("shanchu",true);
					} else if($(this).attr("shanchu")=="true"){
						$("#out7 .shanchu").fadeIn(500);
						$(this).attr("shanchu",false);
					};
				});
				$("#out7 .shanchu").click(function(){
					$(this).parent().slideUp(500,function(){
						$(this).remove();
						jiesuanR();
						jiesuanH()
					});
				});
				function jiesuanR(){
					m=0;
					sl=0;
					for (var i = 0; i < $(".japan .duiHao").length; i++) {
						if ($(".japan .duiHao").eq(i).attr("check")=="true") {
							m+=($(".japan .li2").eq(i).find(".pricee").text()-0)*($(".japan .li2").eq(i).find(".num").text()-0);
							sl++;
						};
					};
					$(".japan>.li4 span").text(sl);
				    $(".japan>.li3").eq(0).find(".pricee").text(m.toFixed(2));	
				    $(".japan>.li3").eq(2).find(".pricee").text(($(".japan>.li3").eq(1).find(".pricee").text()-0+m).toFixed(2));
				    huiFu(0);
				};
				function jiesuanH(){
					m=0;
					sl=0;
					for (var i = 0; i < $(".hanguo .duiHao").length; i++) {
						if ($(".hanguo .duiHao").eq(i).attr("check")=="true") {
							m+=($(".hanguo .li2").eq(i).find(".pricee").text()-0)*($(".hanguo .li2").eq(i).find(".num").text()-0);
							sl++;
						};
					};
					$(".hanguo>.li4 span").text(sl);
				    $(".hanguo>.li3").eq(0).find(".pricee").text(m.toFixed(2));	
				    $(".hanguo>.li3").eq(2).find(".pricee").text(($(".japan>.li3").eq(1).find(".pricee").text()-0+m).toFixed(2));
				    huiFu(1);
				};
				function duiHaots(){
					for (var i = 0; i < $("#out7 .duiHao").length; i++) {
						if ($("#out7 .duiHao").eq(i).attr("check")=="true") {
							$("#out7 .duiHao").eq(i).css("filter","none");
						} else if($("#out7 .duiHao").eq(i).attr("check")=="false"){
							$("#out7 .duiHao").eq(i).css("filter","grayscale(100%)");
						}
					}
				};
				function huiFu(n){
				    if(sl==0){
				    	    $("#out7 .duiHaoD").eq(n).attr("check",false).css("filter","grayscale(100%)");
				    }
				};
				
			},
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.round2();
		},
	}
</script>

<style>
	#out7{
		background: #f2f2f2;
	}
	#out7 a{
		text-decoration: none;
	}
	ul{
		list-style: none;
	}
	#out7 #top6 {
		width: 100vw;
		height: 9.6rem;
		background: #e53e42;
		color: white;
		position: fixed;
		top: 0;
		z-index: 10;
		text-align: center;
		font-size: 3.6rem;
		line-height: 9.6rem;
		padding-left: 5rem;
		box-sizing: border-box;
	}
	#out7 #top6>span{
		font-size: 3rem;
		float: right;
		margin-right: 2rem;
	}
	#out7 #back{
		height: 9.9rem;
	}
	#out7 #tu{
		overflow: hidden;
		width: 72rem;
		height: 18rem;
		position: relative;
	}
	#out7 .backI{
		position: absolute;
		top: -10rem;
		left: -2rem;
		width: 75rem;
	}
	#out7 .shop{
		position: absolute;
		left: 28.8rem;
		top: 1.5rem;
		width: 15.6rem;
	}
	#out7 #tu>.songLi{
		position: absolute;
		width: 22rem;
		height: 4rem;
		background-color: #e53e42;
	    box-shadow: 0 0.4rem 0.4rem 0
		#781114;
		font-size: 2.8rem;
		line-height: 4rem;
		color: white;
		padding-left: 1rem;
		right: 1.7rem;
		top: 5rem;
	}
	#out7 #tu>.Go{
		width: 12rem;
		height: 4rem;
		font-size: 2.4rem;
		line-height: 4rem;
		position: absolute;
		background: white;
		right: 12.7rem;
		top: 9.7rem;
	}
	#out7>ul{
		margin-bottom: 2rem;
		background: white;
	}
	#out7>ul>li{
		border-top: 0.1rem solid #CCCCCC;
		border-bottom: 0.1rem solid #CCCCCC;
		padding: 2rem;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.duiHao,.duiHaoD{
		width: 3rem;
		height: 3rem;
		filter: grayscale(100%);
	}
	.li1 .fly{
		width: 3.4rem;
		height: 3.3rem;
	}
	.li1>span{
		font-size: 2.8rem;
		width: 60rem;
	}
	.li2{
		height: 20rem;
		border-top: none;
		border-bottom: none;
	}
	.li2>.duiHao{
		transform: translateX(-1rem);
	}
	.li2>div>img{
		width: 8.6rem;
		height: 10rem;
		margin: 4.8rem;
		margin-left: 0;
	}
	.li2>div>div{
		float: right;
	}
	.li2>div>div>p{
		padding: 1.5rem 0;
		font-size: 2.4rem;
		color: #666666;
	}
	.li2>div>div>.tit{
		font-size: 2.8rem;
		color: #000000;
	}
	.li2>div>div>.price{
		color: #FF0000;
		padding-top: 6rem;
	}
	.li2>.btns{
		width: 16rem;
		height: 4.8rem;
		font-size: 3.6rem;
		padding: 0.1rem;
		border: 0.1rem solid #CCCCCC;
		border-radius: 4.8rem;
		display: flex;
		align-items: center;
		justify-content: space-around;
		transform: translateY(8rem);
	}
	.li2>.btns>span{
		width: 4rem;
		height: 4rem;
		border-radius: 50%;
		border: solid 1px #999999;
		text-align: center;
	}
	.li2>.btns>.num{
		border: none;
	}
	.li2>.btns>.cut{
		transform: translateX(-0.7rem);
	}
	.li2>.btns>.add{
		transform: translateX(0.7rem);
	}
	.li3,.li4{
		height: 8rem;
		font-size: 2.8rem;
	}
	.li3>span{
		transform: translateX(-9rem);
	}
	.li3>.price{
		color: #FF0000;
		width: 15rem;
		text-align: right;
		transform: translateX(8rem);
	}
	.li4 a{
		width: 14rem;
		height: 4.8rem;
		background: #FF0000;
		text-align: center;
		line-height: 4.8rem;
		color: white;
		border-radius: 4.8rem;
		transform: translateX(25rem);
	}
	.li5>div>img{
		width: 8.6rem;
		height: 10rem;
		margin: 4.8rem;
		margin-left: 0;
	}
	.li5>div>div{
		float: right;
	}
	.li5>div>div>p{
		padding: 1rem 0;
		font-size: 2.4rem;
		color: #666666;
	}
	.li5>div>div>.tit{
		font-size: 2.8rem;
		color: #000000;
	}
	.li5>div>div>.price{
		color: #FF0000;
	}
	.li6>span{
		width: 30rem;
		height: 4.6rem;
		border: solid 0.1rem #cccccc;
		border-radius: 4.6rem;
		font-size: 2.4rem;
		text-align: center;
		line-height: 4.6rem;
		color: #4d4d4d;
	}
	#out7>ul>.tittt{
		border-bottom: none;
	}
	.tittt>span{
		font-size: 3rem;
	}
	.tittt>.line{
		width: 6rem;
		height: 0.1rem;
		background-color: #cccccc;
		transform: translateX(12rem);
	}
	#out7>ul>.con{
		border: none;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 0; 
	}
	.con>div{
		width: 17.85rem;
		text-align: center;
	}
	.con>.line{
		width: 0.2rem;
		height: 17rem;
		background-color: #cccccc;
	}
	.con>div>img{
		width: 7.5rem;
		height: 15.3rem;
		margin-bottom: 2.5rem;
	}
	.con>div>p{
		font-size: 2.4rem;
		padding-bottom: 1rem;
	}
	.con>div>.price{
		color: #e83d41;
	}
	#out7>ul>.jiaZaii{
		font-size: 1.8rem;
		border: none;
		color: #808080;
	}
	#out7 .shanchu{
		height: 20rem;
		background: #FF0000;
		color: #FFFFFF;
		font-size: 3rem;
		line-height: 20rem;
		border-radius: 4rem;
		padding: 1rem;
		box-sizing: border-box;
		display: none;
	}
</style>